<template>
	<view id="v1">
		<view class="box" v-for="v in data" key=v.orderNum @click="getNum(v.orderNum)">
			<view class="box1">
				<view class="t1">
					<text>订单号：{{v.orderNum}}</text>
					<text>{{v.submitTime}}</text>
				</view>
				<view class="t2">
					<text>{{v.orderStatus}}</text>
				</view>
			</view>
			<view class="box2">
				<view class="card">
					<image :src="v.courseUrl"></image>
				</view>
				<view class="content">
					<view>{{v.courseName}}</view>
					<view>￥2199/10课时</view>
				</view>
			</view>
			<view class="box3">
				<view>
					<text>如需退款请线下联系老师</text>
				</view>
				<view>
					<text>实付</text>
					<text>￥{{v.orderPrice}}.00</text>
				</view>
			</view>
		</view>
	</view>
	<bottom />
</template>

<script setup lang="ts">
	import bottom from '@/components/BottomText/BottomText.vue'
	import {onMounted,ref} from 'vue';
	import http from '../../utils/http';
	let data=ref([]);
	const getNum=function(Num){
		uni.navigateTo({
			url: `/pages/Course-orders-in-learning/Course-orders-in-learning?Num=${Num}`
		});
	}
	onMounted(()=>{
		http({
			url:'/order/myCourseInfo01',
			params:{
				nickname:'心死绿稻田',
				orderStatus:'学习中'
			}
		}).then((res)=>{
			data.value=[res.data]
		})
	})
</script>

<style lang="less">
	page {
		background-color: #f9f9f9;
	}

	#v1 {
		display: flex;
		align-items: center;
		justify-content: center;
		flex-wrap: wrap;
		height: 100%;
		width: 100%;
		background-color: rgba(242, 242, 242, 0.498039215686275);

		.box {
			width: 676rpx;
			height: 368rpx;
			_border: 1px solid red;
			border-radius: 12rpx;
			background-color: rgba(255, 255, 255, 1);
			box-shadow: 1px 2px 10px rgb(242 242 242 / 50%);
			margin -top: 30rpx;
			;
			box-shadow: 0px 2px 10px rgb(242 242 242 / 50%);
		}
	}

	.box1 {
		margin: 28rpx 24rpx 0 24rpx;
		display: flex;
		justify-content: space-between;

		.t1 text:nth-child(1) {
			font-size: 24rpx;
			color: rgb(153, 153, 153);
			font-family: 思源黑体;
			font-weight: 400;
		}

		.t1 text:nth-child(2) {
			font-size: 24rpx;
			color: rgb(153, 153, 153);
			font-family: 思源黑体;
			margin-left: 24rpx;
			font-weight: 400;
		}

		.t2 text {
			font-size: 24rpx;
			color: #2F78FF;
			font-weight: 700;
		}
	}

	.box2 {
		display: flex;

		.content {
			margin-left: 24rpx;
			margin-top: 60rpx;

			view:nth-child(1) {
				font-size: 28rpx;
				font-weight: 500;
				color: #333333;
				margin-bottom: 20rpx;
			}
		}

		.content view:nth-child(2) {
			font-size: 28rpx;
			font-weight: 700;
			color: rgb(239, 179, 54);
		}
	}

	.card {
		border-radius: 8rpx;
		margin-left: 24rpx;
		margin-top: 40rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	
		image {
			width: 174rpx;
			height: 128rpx;
		}
	}

	.box3 {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 34rpx;

		view:nth-child(1) {
			font-size: 24rpx;
			font-weight: 400;
			color: #999999;
			text-align: center;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-left: 24rpx;
		}

		view:nth-child(2){
			display: flex;
			align-items: center;
			justify-content: center;
			text:nth-child(1){
				font-weight: 500;
				font-family: 'PingFang SC Medium', 'PingFang SC';
				font-size: 28rpx;
				color: #333333;
			}
			text:nth-child(2){
				font-size: 28rpx;
				font-family: 'Roboto Bold', 'Roboto';
				color:#ff0000;
				font-weight: 700;
			}
		}
	}
</style>
